<template>
  <div class="task-management">
    <TopNavigation :showOrganizationSection="false" :showTaskRoleSection="false" />
    
    <div class="container">
      <!-- 页面标题和操作区域 -->
      <div class="page-header">
        <div class="header-left">
          <h2>任务管理</h2>
          <p class="page-description">任务统计概览与数据源详情</p>
        </div>
        <div class="header-right">
          <div class="search-input-wrapper">
            <input 
              type="text" 
              class="input search-input" 
              v-model="searchKeyword" 
              placeholder="搜索功能开发中..."
              @keyup.enter="handleSearch"
            >
            <button class="search-btn" @click="handleSearch">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </button>
          </div>
          
          <button class="btn btn-primary new-task-btn" @click="showNewTaskModal = true">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            新建任务
          </button>
        </div>
      </div>
      
      <!-- 统计信息区域 -->
      <div class="stats-section" v-if="stats">
        <!-- 总体统计卡片 -->
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="16" y1="2" x2="16" y2="6"></line>
                <line x1="8" y1="2" x2="8" y2="6"></line>
                <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.totalTasks || 0 }}</div>
              <div class="stat-label">总任务数</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon assigned">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M8 12l2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.assignedTasks || 0 }}</div>
              <div class="stat-label">已分配</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon unassigned">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <polyline points="12,6 12,12 16,14"></polyline>
              </svg>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.unassignedTasks || 0 }}</div>
              <div class="stat-label">未分配</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon rate">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22,4 12,14.01 9,11.01"></polyline>
              </svg>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ (stats.assignedRate || 0).toFixed(1) }}%</div>
              <div class="stat-label">分配率</div>
            </div>
          </div>
        </div>
        
        <!-- 数据源详细统计 -->
        <div class="datasource-stats-section" v-if="dataSourceStats.length > 0">
          <h3 class="section-title">数据源统计详情</h3>
          <div class="datasource-stats-grid">
            <div v-for="ds in dataSourceStats" :key="ds.dataSourceId" class="datasource-stat-card">
              <div class="datasource-header">
                <div class="datasource-info">
                  <div class="task-type-name main-info">任务类型: {{ ds.taskTypeName }}</div>
                  <div class="datasource-name">数据源名称: {{ ds.dataSourceName }}</div>
                  <div class="datasource-id">数据源ID: {{ ds.dataSourceId }}</div>
                </div>
                <div class="datasource-actions">
                  <button class="btn btn-secondary btn-sm" @click="viewDataSourceDetail(ds)" title="查看详情">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </button>
                  <button class="btn btn-primary btn-sm" @click="configProcess(ds)" title="配置流程">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <rect x="3" y="3" width="7" height="7"></rect>
                      <rect x="14" y="3" width="7" height="7"></rect>
                      <rect x="14" y="14" width="7" height="7"></rect>
                      <rect x="3" y="14" width="7" height="7"></rect>
                    </svg>
                  </button>
                  <button class="btn btn-success btn-sm" @click="distributeTask(ds)" title="任务分发">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="18" cy="5" r="3"></circle>
                      <circle cx="6" cy="12" r="3"></circle>
                      <circle cx="18" cy="19" r="3"></circle>
                      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                    </svg>
                  </button>
                  <button class="btn btn-danger btn-sm" @click="deleteDataSource(ds)" title="删除数据源">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <polyline points="3,6 5,6 21,6"></polyline>
                      <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                      <line x1="10" y1="11" x2="10" y2="17"></line>
                      <line x1="14" y1="11" x2="14" y2="17"></line>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="datasource-metrics">
                <div class="metric">
                  <span class="metric-label">总任务</span>
                  <span class="metric-value total">{{ ds.totalTasks || 0 }}</span>
                </div>
                <div class="metric">
                  <span class="metric-label">已分配</span>
                  <span class="metric-value assigned">{{ ds.assignedTasks || 0 }}</span>
                </div>
                <div class="metric">
                  <span class="metric-label">未分配</span>
                  <span class="metric-value unassigned">{{ ds.unassignedTasks || 0 }}</span>
                </div>
                <div class="metric">
                  <span class="metric-label">分配率</span>
                  <span class="metric-value rate">{{ (ds.assignedRate || 0).toFixed(1) }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 新建任务模态框 -->
    <NewTaskModal 
      v-if="showNewTaskModal" 
      @close="showNewTaskModal = false"
      @created="handleTaskCreated"
      @showMessage="(message, title, type) => showCustomAlert(message, title, type)"
    />
    
    <!-- 流程选择模态框 -->
    <ProcessSelectModal
      :visible="showProcessSelectModal"
      :title="'为数据源配置流程：' + (selectedDataSource?.dataSourceName || '')"
      :dataSourceId="selectedDataSource?.dataSourceId || ''"
      :dataSourceName="selectedDataSource?.dataSourceName || ''"
      @close="showProcessSelectModal = false"
      @confirm="handleProcessSelectConfirm"
      @showMessage="(message, title, type) => showCustomAlert(message, title, type)"
    />
    
    <!-- 居中提示弹窗组件 -->
    <div v-if="showAlert" class="alert-modal" @click="closeAlert">
      <div class="modal-container" @click.stop>
        <div class="modal-header">
          <h4>{{ alertTitle }}</h4>
        </div>
        <div class="modal-body">
          <p>{{ alertMessage }}</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" @click="closeAlert">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import taskService from '../services/taskService';
import TopNavigation from '../components/TopNavigation.vue';
import NewTaskModal from '../components/NewTaskModal.vue';
import ProcessSelectModal from '../components/ProcessSelectModal.vue';
import { useRouter } from 'vue-router';

export default {
  name: 'TaskManagement',
  components: {
    TopNavigation,
    NewTaskModal,
    ProcessSelectModal
  },
  setup() {
    const router = useRouter();
    
    // 统计信息
    const stats = ref(null);
    // 数据源详细统计信息
    const dataSourceStats = ref([]);
    // 搜索关键词
    const searchKeyword = ref('');
    // 是否显示新建任务模态框
    const showNewTaskModal = ref(false);
    // 是否显示流程选择模态框
    const showProcessSelectModal = ref(false);
    // 当前选中的数据源信息
    const selectedDataSource = ref(null);
    
    // 获取统计信息
    const fetchStats = async () => {
      try {
        const response = await taskService.getTaskStats();
        console.log('API响应:', response);
        
        // 处理新的API响应结构
        const apiDataSourceStats = response.data || [];
        
        // 保存数据源详细统计信息
        dataSourceStats.value = apiDataSourceStats;
        
        // 合并所有数据源的统计信息
        const aggregatedStats = {
          totalTasks: 0,
          assignedTasks: 0,
          unassignedTasks: 0,
          assignedRate: 0
        };
        
        apiDataSourceStats.forEach(ds => {
          aggregatedStats.totalTasks += ds.totalTasks || 0;
          aggregatedStats.assignedTasks += ds.assignedTasks || 0;
          aggregatedStats.unassignedTasks += ds.unassignedTasks || 0;
        });
        
        // 计算总分配率
        if (aggregatedStats.totalTasks > 0) {
          aggregatedStats.assignedRate = Math.round(
            (aggregatedStats.assignedTasks * 100.0 / aggregatedStats.totalTasks) * 100
          ) / 100;
        }
        
        stats.value = aggregatedStats;
        console.log('统计信息处理成功:', stats.value);
        console.log('数据源详细统计:', dataSourceStats.value);
      } catch (error) {
        console.error('获取统计信息失败:', error);
        // 如果 API 失败，设置默认值
        stats.value = {
          totalTasks: 0,
          assignedTasks: 0,
          unassignedTasks: 0,
          assignedRate: 0
        };
        dataSourceStats.value = [];
      }
    };
    
    // 处理搜索
    const handleSearch = () => {
      console.log('搜索关键词:', searchKeyword.value);
      // 可以在这里添加搜索逻辑
    };
    
    // 处理任务创建成功
    const handleTaskCreated = () => {
      console.log('任务创建成功');
      // 刷新统计信息
      fetchStats();
    };
    
    // 查看数据源详情
    const viewDataSourceDetail = (dataSource) => {
      console.log('查看数据源详情:', dataSource);
      // 跳转到任务详情页面
      router.push(`/task-detail/${dataSource.dataSourceId}`);
    };
    
    // 删除数据源
    const deleteDataSource = async (dataSource) => {
      if (confirm(`确定要删除数据源 "${dataSource.dataSourceName}" 吗？\n该操作不可恢复！`)) {
        try {
          // 这里可以添加删除数据源的API调用
          // await dataSourceService.deleteDataSource(dataSource.dataSourceId);
          
          console.log('删除数据源:', dataSource.dataSourceId);
          
          // 模拟删除成功，从本地数据中移除
          dataSourceStats.value = dataSourceStats.value.filter(ds => ds.dataSourceId !== dataSource.dataSourceId);
          
          // 重新计算聚合统计信息
          const aggregatedStats = {
            totalTasks: 0,
            assignedTasks: 0,
            unassignedTasks: 0,
            assignedRate: 0
          };
          
          dataSourceStats.value.forEach(ds => {
            aggregatedStats.totalTasks += ds.totalTasks || 0;
            aggregatedStats.assignedTasks += ds.assignedTasks || 0;
            aggregatedStats.unassignedTasks += ds.unassignedTasks || 0;
          });
          
          if (aggregatedStats.totalTasks > 0) {
            aggregatedStats.assignedRate = Math.round(
              (aggregatedStats.assignedTasks * 100.0 / aggregatedStats.totalTasks) * 100
            ) / 100;
          }
          
          stats.value = aggregatedStats;
          
          alert('数据源删除成功！');
        } catch (error) {
          console.error('删除数据源失败:', error);
          alert('删除数据源失败，请重试！');
        }
      }
    };
    
    // 配置流程 - 显示流程选择模态框
    const configProcess = (dataSource) => {
      console.log('配置流程:', dataSource);
      selectedDataSource.value = dataSource;
      showProcessSelectModal.value = true;
    };
    
    // 居中弹窗相关状态
  const showAlert = ref(false);
  const alertMessage = ref('');
  const alertTitle = ref('提示');
  const alertType = ref('info'); // info, success, error

  // 显示居中弹窗
  const showCustomAlert = (message, title = '提示', type = 'info') => {
    alertMessage.value = message;
    alertTitle.value = title;
    alertType.value = type;
    showAlert.value = true;
  };

  // 关闭居中弹窗
  const closeAlert = () => {
    showAlert.value = false;
  };

  // 处理流程选择确认
  const handleProcessSelectConfirm = async (result) => {
    console.log('流程选择确认:', result);
    try {
      // 发送批量分配任务流程的请求
      const response = await taskService.batchAssignTaskFlow({
        dataSourceId: result.dataSourceId,
        processId: result.processId
      });
      console.log('批量分配任务流程成功:', response);
      
      // 请求成功后显示成功提示并刷新任务管理界面
      showCustomAlert('批量分配任务流程成功！', '成功', 'success');
      // 刷新统计信息
      fetchStats();
      // 关闭流程选择模态框
      showProcessSelectModal.value = false;
    } catch (error) {
      console.error('批量分配任务流程失败:', error);
      showCustomAlert('批量分配任务流程失败，请重试！', '错误', 'error');
    }
  };
  
  // 任务分发
  const distributeTask = async (dataSource) => {
    console.log('任务分发:', dataSource);
    try {
      // 调用批量分发并分配任务接口
      const response = await taskService.batchDistributeAndAssignTaskByDataSource(dataSource.dataSourceId, {
        dataSourceId: dataSource.dataSourceId
      });
      console.log('任务分发成功:', response);
      // 显示成功提示
      showCustomAlert('任务分发成功！', '成功', 'success');
      // 刷新统计信息
      fetchStats();
    } catch (error) {
      console.error('任务分发失败:', error);
      showCustomAlert('任务分发失败，请重试！', '错误', 'error');
    }
  };
    
    // 初始加载
    onMounted(() => {
      fetchStats();
    });
    
    return {
      stats,
      dataSourceStats,
      searchKeyword,
      showNewTaskModal,
      showProcessSelectModal,
      selectedDataSource,
      showAlert,
      alertMessage,
      alertTitle,
      alertType,
      showCustomAlert,
      closeAlert,
      handleSearch,
      handleTaskCreated,
      viewDataSourceDetail,
      deleteDataSource,
      configProcess,
      distributeTask,
      handleProcessSelectConfirm
    };
  }
};
</script>

<style scoped>
.task-management {
  background-color: var(--bg-light);
  min-height: 100vh;
  width: 100%;
}

.container {
  padding: 10px 20px 20px 20px; /* 减少顶部内边距 */
  max-width: 1400px; /* 增加最大宽度 */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-base);
  gap: 20px;
}

.header-left {
  flex: 1;
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.page-header h2 {
  margin: 0 0 5px 0;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
}

.page-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.search-input-wrapper {
  position: relative;
  width: 300px;
}

.search-input {
  width: 100%;
  padding: 10px 45px 10px 15px;
  border: 1px solid var(--border-base);
  border-radius: var(--border-radius-base);
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(64, 169, 255, 0.2);
}

.search-btn {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 40px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: calc(var(--border-radius-base) - 2px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.search-btn:hover {
  background-color: var(--primary-hover);
}

.new-task-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.new-task-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .header-right {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-input-wrapper {
    width: 100%;
  }
  
  .new-task-btn {
    width: 100%;
    justify-content: center;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
}

@media (max-width: 1024px) {
  .header-right {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-input-wrapper {
    width: 250px;
  }
}

.stats-section {
  margin-bottom: 20px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 10px;
}

.stat-card {
  background: var(--bg-white);
  border-radius: var(--border-radius-md);
  padding: 20px;
  box-shadow: var(--shadow-base);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
}

.stat-icon.assigned {
  background-color: #52c41a;
}

.stat-icon.unassigned {
  background-color: #faad14;
}

.stat-icon.rate {
  background-color: #1890ff;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 数据源统计详情样式 */
.datasource-stats-section {
  margin-top: 25px;
}

.section-title {
  margin: 0 0 15px 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 8px;
}

.datasource-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.datasource-stat-card {
  background: var(--bg-white);
  border-radius: var(--border-radius-md);
  padding: 20px;
  box-shadow: var(--shadow-base);
  border-left: 4px solid var(--primary-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.datasource-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.datasource-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}

.datasource-info {
  flex: 1;
  min-width: 0;
}

.datasource-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.datasource-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.datasource-id {
  font-size: 12px;
  color: var(--text-secondary);
  background-color: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.btn-sm {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  min-width: 32px;
  height: 32px;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
      background-color: #545b62;
      transform: translateY(-1px);
    }

    .btn-primary {
      background-color: #007bff;
      color: white;
    }

    .btn-primary:hover {
      background-color: #0056b3;
      transform: translateY(-1px);
    }

    .btn-success {
      background-color: #28a745;
      color: white;
    }

    .btn-success:hover {
      background-color: #1e7e34;
      transform: translateY(-1px);
    }

    .btn-danger {
      background-color: #dc3545;
      color: white;
    }

    .btn-danger:hover {
      background-color: #c82333;
      transform: translateY(-1px);
    }

    /* 居中提示弹窗样式 */
    .alert-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-container {
      background: white;
      border-radius: var(--border-radius-md);
      width: 90%;
      max-width: 400px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .modal-header {
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
    }

    .modal-header h4 {
      margin: 0;
      color: var(--text-primary);
      font-size: 16px;
      font-weight: 600;
    }

    .modal-body {
      padding: 20px;
    }

    .modal-body p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 14px;
      text-align: center;
    }

    .modal-footer {
      padding: 10px 20px 20px;
      text-align: center;
    }

    .modal-footer .btn {
      padding: 8px 20px;
      font-size: 14px;
    }

.btn-sm svg {
  width: 14px;
  height: 14px;
}

.datasource-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.metric-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.metric-value {
  font-size: 16px;
  font-weight: 700;
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 45px;
  text-align: center;
}

.metric-value.total {
  background-color: #e6f7ff;
  color: #1890ff;
}

.metric-value.assigned {
  background-color: #f6ffed;
  color: #52c41a;
}

.metric-value.unassigned {
  background-color: #fff7e6;
  color: #faad14;
}

.metric-value.rate {
  background-color: #f0f5ff;
  color: #722ed1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .datasource-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .datasource-metrics {
    grid-template-columns: 1fr;
  }
  
  .datasource-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .datasource-actions {
    align-self: flex-end;
  }
}

.stat-card {
  background: var(--bg-white);
  border-radius: var(--border-radius-md);
  padding: 20px;
  box-shadow: var(--shadow-base);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
}

.stat-icon.assigned {
  background-color: #52c41a;
}

.stat-icon.unassigned {
  background-color: #faad14;
}

.stat-icon.rate {
  background-color: #1890ff;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.search-action-container {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      flex-wrap: wrap;
    }

    .search-input-wrapper {
      position: relative;
      max-width: 400px;
      width: 100%;
      flex: 1;
    }

.search-input {
  padding-right: 45px;
  width: 100%;
}

.search-btn {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 40px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: calc(var(--border-radius-base) - 2px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.search-btn:hover {
      background-color: var(--primary-hover);
    }

    .new-task-btn {
      white-space: nowrap;
    }

    /* 针对小屏幕的响应式调整 */
    @media (max-width: 768px) {
      .search-action-container {
        flex-direction: column;
        align-items: stretch;
      }
      
      .new-task-btn {
        width: 100%;
        justify-content: center;
      }
    }
</style>